<template>
  <div class="bodys">
    <Header headerTxt="Dad" :showBack="false"></Header>
    <div class="top">
         <span>{{$t('ws_quotes.platform')}}</span>
                <el-table
                    :data="trlist"
                    stripe
                    style="width: 100%;font-size:10px">
                    <el-table-column
                    prop="user_id"
                    :label="$t('ws_quotes.trader')"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="count"
                     :label="$t('ws_transition.amountTransaction')"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="createTime"
                     :label="$t('ws_quotes.timer')"
                    width=160
                    >
                    </el-table-column>
                </el-table>

                <!-- <div class="text-container">
                      <transition class="inner-container2" name="slide" mode="out-in">
                        <p class="text2" :key="text.id">{{text.val}}</p>
                      </transition>
                </div> -->
    </div>
    <p  style="background: #f8f8ff;width:100vw;height:6vh;"></p>
    <div id="myChart" ref="myChart" :style="{width: '100%', height: '320px'}"></div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import echarts from "echarts";
import { getnotice } from '@/api/getData'
import { trlists } from '@/api/getData'

export default {
  data() {
    return {
        trlist:[],
        seriesData:[{
                "name": "卖出",
                "value": "2002"
            },
            {
                "name": "买入",
                "value": "6000"
            }],
        arr:[],


    };
  },

  methods: {



    async getData(){
        const res = await trlists();
          this.seriesData = res.data.result.pic;
          this.trlist = res.data.result.out;
          this.arr = res.data.result.msg;
    },
    drawLine() {
      let myChart = echarts.init(this.$refs.myChart);
      myChart.setOption({
        title: {
          text: this.$t('ws_quotes.funs'),
          x: "left",
          top:20,
          textStyle: {
          color: '#ccc'
        }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color:["#DD5C5B","#23A784"],
        series: [
          {
            name: "交易量",
            type: "pie",
            radius: ['42%', '53%'], // 半径
            center: ['50%', '51%'], // 位置
            data: this.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
              }
            }
          }
        ]
      });
    },
  },
  mounted(){
     this.getData();
      this.drawLine();
  },
  components: {
    Header
  }
};
</script>
<style lang="stylus" scoped>
*{
    margin: 0;
    padding: 0;
    
}
.bodys{
    margin: 0;
    padding: 0;
    width: 100%;
    height:100vh;
    background: #F8F8FF;
    font-size: .27rem;
}
.bodys{
    width: 100%;
    height:100vh;
    background: #F8F8FF;
}
.top{
    width: 100vw;
    height: 40vh;
    padding-top: 1.5rem;
    background-color: white;
}
.top span{
        margin:0
        font-size:.35rem;
        padding-left:5vw;
    }

#myChart {
  margin-top:.2rem;
  background #fff;
  canvas:100vw
}
.slide-enter-active, .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-leave-to {
    transform: translateY(-20px);
  }
  .slide-enter{
    transform: translateY(20px);
  }
    .text-container {
    width: 500px;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
    border: 1px solid cornflowerblue;
    overflow: hidden;
  }
  .text, .text2 {
    margin: 0;
  }
  .inner-container {
    animation: myMove 5s linear infinite;
    animation-fill-mode: forwards;
  }
</style>
